<script setup>
import { ref } from 'vue'
defineOptions({ name: 'BannerIndex' })
import { getFailData, delFailData } from '@/api/fail'
import { ElMessage } from 'element-plus'
//定义数据存放数组
const tableData = ref(0)
//定义类别筛选数组
const CATEGORY = ref([
  { text: '饮品', value: 0 },
  { text: '生活用品', value: 1 },
  { text: '食品', value: 2 },
  { text: '傻逼孙英杰', value: 3 }
])
//定义弹窗打开状态值
const isShow = ref(false)
//获取数据
const getTableList = async () => {
  const res = await getFailData()
  tableData.value = res.data
}
getTableList()
//分类筛选
const filterHandler = (value) => {
  console.log(value)
}
//清空弹窗内容
const clear = () => {
  isShow.value = false
  out.value = ref({ id: null, number: null, address: null })
  maxNumber.value = null
}
//数字范围
const maxNumber = ref(null)
//数字校验规则
const isNumber = (rule, value, callback) => {
  if (typeof value !== 'number' || isNaN(value)) {
    callback(new Error('请输入数字'))
  } else if (value < 1 || value > maxNumber.value) {
    console.log(11)
    callback(new Error(`数量范围为1-${maxNumber.value}`))
  } else {
    callback()
  }
}
//表单校验
const rule = ref({
  address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
  quantity: [
    { required: true, message: '请输入数字', trigger: 'blur' },
    {
      validator: isNumber,
      trigger: 'blur'
    }
  ]
})

//出库数据
const out = ref({ id: null, quantity: null, address: null })
//删除操作
const handleDelete = async (id) => {
  const res = await delFailData(id)
  if (res.code === 20000) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
  }
  getTableList()
}
</script>

<template>
  <el-table style="width: 100%" :data="tableData">
    <el-table-column prop="id" label="ID" width="90" />
    <el-table-column prop="title" label="货品名" width="180" />
    <el-table-column prop="username" label="操作员名称" width="180" />
    <el-table-column prop="image" label="图片" width="180">
      <template #default="{ row }">
        <img :src="row.image" alt="" width="100px" />
      </template>
    </el-table-column>
    <el-table-column prop="quantity" label="数量" width="100" />
    <el-table-column
      prop="category"
      label="分类"
      width="90"
      column-key="category"
      :filters="CATEGORY"
      :filter-method="filterHandler"
    />
    <el-table-column prop="updateTime" label="添加时间" width="180" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button size="small" type="danger" @click="handleDelete(row.id)"> 删除 </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="isShow" title="出库信息" :before-close="clear">
    <el-form label-width="auto" :model="out" :rules="rule">
      <el-form-item label="出库数量" prop="quantity">
        <el-input v-model.number="out.quantity"></el-input>
      </el-form-item>
      <el-form-item label="发货地" prop="address">
        <el-input v-model="out.address"></el-input>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="clear">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.el-form-item {
  width: 400px;
}

.w600 {
  width: 600px;
}
</style>
